<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 15L33 33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

      <span style="margin-left: 10px">黑名单</span>

      
      <el-button
        size="mini"
        type="primary"
        @click="handlePrint"
        style="margin-left:auto;"
      >
        打印
      </el-button>
    </div>

    <div class="content">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="content" label="内容">
          <template slot-scope="scope">
            <div>名称：{{scope.row.name}}</div>
            <div>拦截电话：{{scope.row.phone}}</div>
            <div>拦截数量 ：{{scope.row.interception_call_count}}</div>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :small='true'
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

  
  <script>
import { getHuaWeiInfoApi } from "@/api/phoneInfo/index"
import printJS from "print-js"

export default {
  props: ["sendData"],
  name: "huweiBlackList2",
  data() {
    return {
      list: [],
      offset: 1,
      limit: 1000,
      total: 0,
    }
  },
  mounted() {
    this.init()
  },

  watch: {
    "$store.state.account.huawei2"() {
      this.tableData = []
      this.init()
    },
  },

  methods: {
    // ✅ 打印
    handlePrint() {
      if (!this.list.length) {
        this.$message.warning("暂无数据可打印")
        return
      }

      const properties = [
        { field: "name", displayName: "名称" },
        { field: "phone", displayName: "拦截电话" },
        { field: "interception_call_count", displayName: "拦截数量" },
      ]

      printJS({
        printable: this.list,
        properties,
        type: "json",
        header: "华为黑名单",
        style: `
          table {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
          }
          table td, table th {
            border: 1px solid #ccc;
            padding: 8px;
            word-break: break-all;
          }
          table th {
            background: #f6f6f6;
            font-weight: 600;
          }
          table tr:nth-child(even){
            background:#fafafa;
          }
        `,
      })
    },

    handleSizeChange(val) {
      this.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.init()
    },

    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        harassmentType: "blacklist",
        offset: this.offset,
        limit: this.limit,
      }
      getHuaWeiInfoApi(data)
        .then((res) => {
          this.list = res.data
          this.total = res.data.length === 0 ? 0 : res.data[0].cnt
        })
        .catch(() => {})
    },
  },
}
</script>

  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>